<template>
  <div class="h-full flex-col">
    <SearchForm @handle-reset="resetParams" @handle-search="getList">
      <el-form :model="searchForm" inline>
        <el-form-item label="시간선택">
          <MyCombinePiker :dateTimeRange="_dateTimeRange" @changeHandle="timePickChangeHandle" />
        </el-form-item>

        <el-form-item>
          <el-input v-model="searchForm.agent_player_name" placeholder="로얄회원ID" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.agent_player_id" placeholder="로얄회원번호" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.player_id" placeholder="JADE회원번호" />
        </el-form-item>
      </el-form>
    </SearchForm>
    <div class="page-card h-full" v-loading="loading">
      <MyTable :tableData="tableData" :tableColumn="tableColumn" v-slot="sp">
        <el-table :data="tableData" :highlight-current-row="true">
          <el-table-column
            v-if="sp.ctc.includes('ID')"
            label="ID"
            prop="player_id"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('로얄회원ID')"
            label="로얄회원ID"
            prop="agent_player_name"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('회원등급')"
            label="회원등급"
            prop="agent_player_lv"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('사이트명')"
            label="사이트명"
            prop="agent_player_brand"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('게임사')"
            label="게임사"
            prop="provider"
            align="center"
          />

          <el-table-column
            v-if="sp.ctc.includes('총베팅금액')"
            label="총베팅금액"
            align="center"
            prop="bet_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.bet_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('총적중금액')"
            label="총적중금액"
            prop="payout_sum"
            align="center"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.payout_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('총잃은금액')"
            label="총잃은금액"
            prop="loss_sum"
            align="center"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.loss_sum) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('적용비율')" label="적용비율" align="center">
            <template #default="{ row }"> {{ row.percent }}% </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('리베이트')"
            label="리베이트"
            prop="add_rebate"
            align="center"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.add_rebate) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('구분')" label="구분" align="center">
            <template #default="{ row }">
              <el-tag :type="row.type == '본인리베이트' ? 'danger' : 'success'">
                {{ row.type }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('날자')" label="날자" prop="date" align="center" />
        </el-table>

        <Pagination
          :pageable="page"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
        />
      </MyTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { playerRebateHistoryApi } from '@/api/member/index';
import { formatNumber, dataTimeRangeCurTwo, formatDate, dateTransToSeoulTime } from '@/utils/util';
import { levelMap } from '@/utils/gameUtil';
import MyTable from '@/components/MyTable';
import { useMyDateRange } from '@/hooks/useMyDateRange';
import MyCombinePiker from '@/components/MyCombinePiker';

const tableColumn = ref([
  'ID',
  '로얄회원ID',
  '회원등급',
  '사이트명',
  '게임사',
  '총베팅금액',
  '총적중금액',
  '총잃은금액',
  '적용비율',
  '리베이트',
  '구분',
  '날자'
]);

const _dateTimeRange = dataTimeRangeCurTwo(-6);

const searchForm = reactive({
  agent_player_id: '',
  agent_player_name: '',
  player_id: '',
  start_ts: dateTransToSeoulTime(_dateTimeRange[0]),
  end_ts: dateTransToSeoulTime(_dateTimeRange[1])
});

const timePickChangeHandle = (timestamp: number, type: string) => {
  searchForm[type] = timestamp;
};

const dataCallBack = (data: any) => {
  const _data = data.data;
  let _list = _data.logs.map((item: any) => {
    item.type = item.type ? '추천인리베이트' : '본인리베이트';
    return item;
  });

  return {
    list: _list,
    total: _data.total_count
  };
};

const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
  useTable({
    apiFn: playerRebateHistoryApi,
    params: searchForm,
    callback: dataCallBack
  });
</script>

<style lang="scss" scoped></style>
